<template>
  <div>
    <el-drawer
      v-model="props.visible"
      direction="rtl"
      size="30%"
      @closed="onClose"
    >
      <template #title>
        <span style="font-size: 16px; font-weight: bold">流程模拟 </span>
      </template>

      <el-card shadow="never" class="box-card" style="margin-top: 10px">
        <template #header> 流程版本 </template>

        <template v-for="version in flowVersions" :key="version.id">
          <el-card
            round
            size="large"
            class="flowversion-card"
            :shadow="version.versionNo == currentVersion ? 'always' : 'never'"
            v-if="version.versionNo == currentVersion"
          >
            <el-button
              round
              type="primary"
              size="small"
              @click="onWorkflowVersionChange(version)"
              >v{{ version.versionNo }}</el-button
            >
            <span>
              &nbsp;&nbsp;&nbsp;
              <el-popconfirm
                title="确认锁定该条记录，锁定将无法编辑?"
                @confirm="onFlowDesignLock(version)"
              >
                <template #reference>
                  <el-button
                    type="primary"
                    icon="Lock"
                    link
                    v-if="!version.isLock"
                  >
                    锁定
                  </el-button>
                </template>
              </el-popconfirm>
              <el-button type="default" icon="Lock" link v-if="version.isLock">
                已锁定
              </el-button>

              <el-button
                type="primary"
                icon="Edit"
                link
                @click="onFlowDesignEdit(version)"
                v-if="!version.isLock"
              >
                编辑
              </el-button>

              <el-button
                type="primary"
                icon="View"
                link
                @click="onFlowDesignEdit(version, true)"
              >
                预览
              </el-button>
              <el-button
                type="success"
                icon="Check"
                link
                v-if="version.versionNo == activeFlowVersion"
                >在用
              </el-button>
              <el-button
                type="warning"
                icon="Check"
                @click="updateFlowActiveVersion(version)"
                link
                v-if="version.versionNo != activeFlowVersion"
                >切换
              </el-button>
            </span>
          </el-card>

          <el-card
            v-else
            round
            type=""
             class="flowversion-card"
              shadow="never"
            @click="onWorkflowVersionChange(version)"
            >v{{ version.versionNo }}
            <el-button
              type="success"
              icon="Check"
              link
              v-if="version.versionNo == activeFlowVersion"
              >在用
            </el-button>
          </el-card>
        </template>
      </el-card>

      <el-card shadow="never" class="box-card" style="margin-top: 10px">
        <template #header> 设计版本 </template>
        <el-button
          type="primary"
          icon="Plus"
          link
          @click="onFormDesignEdit({})"
        >
          新增
        </el-button>
        <template v-for="version in formVersions" :key="version.id">
          <el-card
            round
            size="large"
             class="flowversion-card"
            :shadow="version.version == currentFormVersion ? 'always' : 'never'"
            v-if="version.version == currentFormVersion"
          >
            <el-button round type="primary" size="small"
              >v{{ version.version }}</el-button
            >
            <span>
              &nbsp;&nbsp;&nbsp;

              <el-button
                type="primary"
                icon="Edit"
                link
                @click="onFormDesignEdit(version)"
              >
                编辑
              </el-button>
              <el-button
                type="primary"
                icon="View"
                link
                @click="onFormDesignPreview(version)"
              >
                预览
              </el-button>
              <el-button
                type="success"
                icon="Check"
                link
                v-if="version.version == activeFormVersion"
                >在用
              </el-button>
              <el-button
                type="warning"
                icon="Check"
                @click="updateFormActiveVersion(version)"
                link
                v-if="version.version != activeFormVersion"
                >切换
              </el-button>
            </span>
          </el-card>

          <el-card
            v-else
            round
            type=""
             class="flowversion-card"
              shadow="never"
            @click="currentFormVersion = version.version"
            >v{{ version.version }}
            <el-button
              type="success"
              icon="Check"
              link
              v-if="version.version == activeFormVersion"
              >在用
            </el-button>
          </el-card>
        </template>
      </el-card>
      <br />
      <el-button @click="simulate()" type="primary">模 拟</el-button>
    </el-drawer>

    <FlowSimulationForm
      v-model:visible="simulateFlowData.visible"
      :value="simulateFlowData.value"
    />

    <FlowDesignForm
      v-model:visible="editFlowDesignData.visible"
      v-model:value="editFlowDesignData.value"
      :view-only="editFlowDesignData.viewOnly"
    />

    <FormDesignForm
      v-model:visible="formDesignData.visible"
      v-model:value="formDesignData.value"
      :workflowValue="formDesignData.workflowValue"
      append-to-body
      @closed="load"
    />
    <FormDesignViewer
      v-model:visible="viewFormDesignData.visible"
      v-model:value="viewFormDesignData.value"
      @closed="load"
    />
  </div>
</template>

<script setup>
import { reactive, ref, unref, nextTick, watch, computed } from "vue";
import { useAppUserStore } from "@/stores/appUser";
import { useWorkflowDesignStore } from "@/stores/workflowDesign";
import { useDynamicFormDesignStore } from "@/stores/dynamicFormDesign";
import FlowSimulationForm from "@/components/WorkflowDesign/FlowSimulations/FlowSimulationForm.vue";
import FlowDesignForm from "./FlowDesignForm.vue";
import FormDesignForm from "./FormDesignForm.vue";
import FormDesignViewer from "./FormDesignViewer.vue";
const props = defineProps({
  visible: {
    default: false,
  },
  workflowId: {
    default: "",
  },
  workflowName: {
    default: "",
  },
  activeVersion: {
    default: 0,
  },
  activeFormVersion: {
    default: 0,
  },
});

const loading = ref(false);
const currentVersion = ref(0);
const activeFlowVersion = ref(0);

const currentFormVersion = ref(0);
const activeFormVersion = ref(0);

const flowVersions = ref([]);
const formVersions = ref([]);

const flowLoading = ref(false);
const formLoading = ref(false);

const simulateFlowData = reactive({
  value: {
    id: "",
    version: 0,
    formVersion: 0,
  },
  visible: false,
});

const editFlowDesignData = reactive({
  value: {
    id: "",
    activeVersion: 0,
    description: "",
    name: "",
  },
  visible: false,
  viewOnly: false,
});

const formDesignData = reactive({
  value: {
    title: "",
    formType: "",
    description: "",
    version: 0,
  },
  workflowValue: {
    id: "",
    activeVersion: "",
  },
  visible: false,
});

const viewFormDesignData = reactive({
  value: {
    formDesignId: "",
    formVersion: 0,
  },
  visible: false,
});

const workflowDesignStore = useWorkflowDesignStore();
const dynamicFormDesignStore = useDynamicFormDesignStore();

watch(
  () => props.visible,
  (val) => {
    if (val) {
      load();
      activeFormVersion.value = props.activeFormVersion;
      currentFormVersion.value = props.activeFormVersion;
      activeFlowVersion.value = props.activeVersion;
      currentVersion.value = props.activeVersion;
    }
  }
);
watch(
  () => props.workflowId,
  (val) => {
    load();
  }
);

// watch(
//   () => props.activeFormVersion,
//   (val) => {
//     activeFormVersion.value = val;
//     currentFormVersion.value = val;
//   }
// );
// watch(
//   () => props.activeVersion,
//   (val) => {
//     activeFlowVersion.value = val;
//     currentVersion.value = val;
//   }
// );

const load = async () => {
  flowVersions.value = [];
  formVersions.value = [];

  currentVersion.value = props.activeVersion;
  currentFormVersion.value = activeFormVersion.value;
  getAllWorkflowVersions(props.workflowId);
  getAllFormDesignVersions({
    id: props.workflowId,
    version: props.activeVersion,
  });
};

const emit = defineEmits(["update:visible", "closed", "update:value"]);
const appUserStore = useAppUserStore();

const getAllFormDesignVersions = async (workflowId) => {
  formLoading.value = true;
  const res = await dynamicFormDesignStore.getAllFormDesignVersionsByWorkflowId(
    workflowId
  );
  formVersions.value = res;
  formLoading.value = false;
  // if (res && res.length > 0) {
  //   currentFormVersion.value = res[0].version;
  //   activeFormVersion.value = res[0].activeVersion;
  // }
};

const getAllWorkflowVersions = async (workflowId) => {
  flowLoading.value = true;
  const res = await workflowDesignStore.getAllWorkflowVersions({
    workflowId: workflowId,
  });
  flowVersions.value = res;
  flowLoading.value = false;
};

const onWorkflowVersionChange = async (workflowVersion) => {
  currentFormVersion.value = 0;
  getAllFormDesignVersions({
    id: workflowVersion.workflowId,
    version: workflowVersion.versionNo,
  });
  currentVersion.value = workflowVersion.versionNo;
};

const simulate = () => {
  simulateFlowData.value.id = props.workflowId;
  simulateFlowData.value.version = currentVersion.value;
  simulateFlowData.value.formVersion = currentFormVersion.value;

  simulateFlowData.visible = true;
};

const onClose = () => {
  emit("closed");
  emit("update:visible", false);
};

//流程锁定
const onFlowDesignLock = async (version) => {
  loading.value = true;
  await workflowDesignStore.lockWorkflowVersion({
    id: props.workflowId,
    versionNo: version.versionNo,
  });
  loading.value = false;
  load();
};
//流程编辑
const onFlowDesignEdit = (version, viewOnly) => {
  editFlowDesignData.value.id = props.workflowId;
  editFlowDesignData.value.name = props.workflowName;
  editFlowDesignData.value.description = version.description;
  editFlowDesignData.value.activeVersion = version.versionNo;
  editFlowDesignData.visible = true;
  editFlowDesignData.viewOnly = viewOnly;
};

//流程切换
const updateFlowActiveVersion = async (versionInfo) => {
  loading.value = true;
  await workflowDesignStore.updateWorkflowActiveVersion({
    workflowId: versionInfo.workflowId,
    activeVersion: versionInfo.versionNo,
  });
  loading.value = false;
  activeFlowVersion.value = versionInfo.versionNo;
  emit("closed", false);
};

//表单预览

const onFormDesignPreview = (version) => {
  viewFormDesignData.value = {
    formDesignId: version.formDesignId,
    formVersion: version.version,
  };
  viewFormDesignData.visible = true;
};

//表单编辑

const onFormDesignEdit = (version) => {
  formDesignData.value = version;
  formDesignData.workflowValue = {
    id: props.workflowId,
    activeVersion: currentVersion.value,
  };
  formDesignData.visible = true;
};

//表单版本切换
const updateFormActiveVersion = async (versionInfo) => {
  loading.value = true;

  await dynamicFormDesignStore.setActiveVersion({
    id: versionInfo.formDesignId,
    version: versionInfo.version,
  });
  loading.value = false;
  load();
};
</script>

<style lang="less" scoped>
.content-box {
  padding: 10px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  margin-top: 10px;
}
:deep(.el-drawer__header) {
  margin-bottom: 0px;
}
.flowversion-card {
  :deep(.el-card__body) {
    padding: 10px;
  }
  margin: 5px;
}
</style>
